<#assign base=request.contextPath  />
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href= "${base}/css/bootstrap.min.css" />
		<script type="text/javascript" src="${base}/js/jquery-1.12.0.min.js"></script>
		<link rel="stylesheet" href="${base}/css/common.css" />
		<script type="text/javascript" src="${base}/js/string.js"></script>
		<script type="text/javascript" src="${base}/js/common.js"></script>
	</head>

	<body>
		<div class="container-fluid">
			<select id="group" class="form-control mar_top">
 				<option>......</option> 
 				
 				<#list groups as item>
 				<option value="${item.id}">${item.name}</option>	
 				</#list>
			</select>
			<ul id="topic_list">
			
			</ul>
            <ul class="pager">
            	<li><a>前一页</a></li>
            	<li><a>后一页</a></li>
            </ul>
		</div>
		<script>
			var $ppager = $(".pager li a").eq(0),
			$npager = $(".pager li a").eq(1),
			group;
			
			var topic_list = $("#topic_list");
			$("#group").change(function() {
				if($(this).prop("selectedIndex") != 0){
					group = $(this).val();
			
					//查询第一页
					topic_list.empty();
					
					url = "action/upages"+"/"+group+"/1";
					$.get(url,{},handler)				
				}
			
			});
			
			
			function pager(){
				if($(this).attr("class") != undefined){
				$.get($(this).attr("class"),{},handler);
				}
			}
			$ppager.on("click",pager);
			$npager.on("click",pager);
			

			function handler(data) {
				topic_list.empty();
		
			$.each(data.data, function(index, value) {
			   var each= "<a href='action/detail/"+value.id+"'>"					
						+"	<li class='list_each'>"
						+"		<p class='title'>"+value.title +"</p>"
					+"<span class='badge' style='background-color:"+(value.noReadCount==0?"grey":"red")+"'>未读&nbsp;"+value.noreadcount+"</span>"
						+"		<span class='name'>"+value.username+"</span>"
						+"		<span class='date'>"+value.ctime+"</span>"
						+"	</li>"
						+"</a>" ;
						
					topic_list.append(each);
				});
				if(data.pre != -1) {
					$ppager.attr("class","action/upages/"+group+"/"+data.pre);
					$ppager.attr("href","javascript:;");
					$ppager.html("前一页");
					}
				else{
					$ppager.html("没有前一页");
					$ppager.removeAttr("class");
					$ppager.removeAttr("href");
				}
				if(data.next != -2) {
					$npager.html("下一页");
					$npager.attr("href","javascript:;");
					$npager.attr("class","action/upages/"+group+"/"+data.next);
				}		
				else{
					$npager.html("没有下一页");
					$npager.removeAttr("class");
					$npager.removeAttr("href");
			
				}
			}
		</script>
	</body>

</html>